<script setup>
import {getJobDetailsService, getResumeListService, CheckJOBService, UpdateJobStatusService} from "@/api/job.js";
import {updatePersonMessageService} from "@/api/user.js";
import {useUserInfoStore} from "@/stores/userInfo.js";
import {useTokenStore} from '@/stores/token.js'
import {getUserInfoService, updateUserService} from "@/api/user.js";
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElDialog, ElButton, ElTag} from 'element-plus';

const route = useRoute();
const router = useRouter();

const jobId = route.params.jobId;

const status = ref(null);
const jobFetched = ref(false);
const userInfoStore = useUserInfoStore();
const userInfo = ref({...userInfoStore.userInfo});
console.log("userInfo:", userInfo.value)
const userId = ref(userInfo.value.id);
console.log("userId:", userId.value)

//获取用户信息
const userInfo2 = ref({})

async function getUserInfo2(){
  let res = await getUserInfoService()
  userInfo2.value = res.data
}

getUserInfo2();

const jobDetails = ref({
  jobId: '',
  location: '',
  hr: '',
  tags: '',
  name: '',
  salary: '',
  companyName: '',
  description: '',
  deleted: 1,
  workRole: '系统架构师,开发者',
  workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
  workField: '海外信贷业务系统开发',
  workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
})
const companyDetails = ref({
  name: '',
  companyId: '',
  phone: '',
  introduction: '',
  status: '',
  size: '',
  address: '',
  companyType: ''
})

async function getJobDetails() {
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
}

getJobDetails()


const ResumeList = ref([
  {
    resumeId: '1',
    name: '张三',
    birthdate: '1995年1月1日',
    degree: '本科',
    school: '北京大学',
    specialized: '计算机科学与技术',
    intention: '前端开发工程师',
    skills: 'JavaScript, Vue.js, React, HTML/CSS, Git',
    projects: '1. 个人博客网站\n2. 在线教育平台前端开发',
    phone: '13800138000',
    experiment: '1~3年',
    approve:-1
  },
  {
    resumeId: '2',
    name: '李四',
    birthdate: '1996年5月5日',
    degree: '硕士',
    school: '清华大学',
    specialized: '软件工程',
    intention: '后端开发工程师',
    skills: 'Java, Python, Spring Boot, Django, MySQL',
    projects: '1. 企业级管理系统开发\n2. 大数据分析平台后端架构设计',
    phone: '13912345678',
    experiment: '3~5年',
    approve:-1
  }
]);

const approve = ref([{approve:0}])

//从后端收到的该职位收到的简历信息
async function getResumeList() {
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  console.log("jobDetails:", jobDetails.value.jobId, companyDetails.value.companyId)
  let res = await getResumeListService(jobDetails.value.jobId, companyDetails.value.companyId)

  ResumeList.value = res.data.resume;
  approve.value = res.data.approve;
  ResumeList.value.forEach((resume, index) => {
    resume.approve = res.data.approve[index];
  });
}

getResumeList()

const dialogVisible = ref(false); // 控制对话框的显示隐藏
const currentResume = ref(null); // 存储当前选中的简历信息

const viewDetails = (resume) => {
  currentResume.value = resume;
  dialogVisible.value = true;
};

const approveResume = async (resume) => {
  dialogVisible.value = false;
  //后端业务逻辑
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  await updatePersonMessageService(jobDetails.value.jobId, companyDetails.value.companyId, resume.resumeId, 1)
  ElMessage.success('面试邀请已发送')
  getResumeList();
};

const rejectResume = async (resume) => {
  dialogVisible.value = false;
  //后端业务逻辑
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  await updatePersonMessageService(jobDetails.value.jobId, companyDetails.value.companyId, resume.resumeId, 2)
  ElMessage.success('面试已拒绝')
  getResumeList();
};


// 计算属性或方法来决定按钮文案
const getButtonText = (deletedStatus) => {
  return deletedStatus === 2 ? '已下架' : '下架岗位';
};

// 方法或计算属性来判断按钮是否应被禁用
const isButtonDisabled = (deletedStatus) => {
  return deletedStatus === 2;
};

const confirmTakeDownJob = async (jobId) => {
  ElMessageBox.confirm(
      '确定要下架此职位吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    UpdateJobStatusService(jobId, 2);
    ElMessage({
      type: 'success',
      message: '下架成功',
    })
    router.push('/CompanyPersonalPage')
  })

      .catch(() => { // action可以帮助识别是取消还是删除
        // 用户点击了"删除"
        ElMessage({
          type: 'info',
          message: '取消下架',
        });
      })
}

</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo2.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link active" v-if="userInfo2.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo2.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>职位细节</h2>
        <ul>
          <li>
            <a href="index.html">
              Home
            </a>
          </li>
          <li class="active">职位细节</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Job Details Area -->
  <section class="job-details-area ptb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">

          <div class="hot-jobs-list">
            <div class="row align-items-center">
              <div class="col-lg-2">
                <div class="hot-jobs-img">
                  <img src="@/assets/images/hot-jobs/hot-jobs-1.png" alt="Image">
                </div>
              </div>

              <div>
                <el-card shadow="hover">
                  <div>
                    <h3><strong>职位：</strong>{{ jobDetails.name || '暂无信息' }}</h3>
                    <p><strong>公司名：</strong>{{ companyDetails.name || '暂无信息' }}</p>
                  </div>
                  <div>
                    <p><strong>薪资：</strong>{{ jobDetails.salary || '暂无信息' }}</p>
                  </div>
                </el-card>
              </div>

              <div class="col-lg-4">
                <div class="hot-jobs-btn">
                  <!-- 修改按钮为下架职位，并添加确认提示 -->
                  <el-button type="danger" @click="jobDetails.deleted !== 2 && confirmTakeDownJob(jobDetails.jobId)" :disabled="isButtonDisabled(jobDetails.deleted)">{{ getButtonText(jobDetails.deleted) }}</el-button>
                </div>
              </div>

            </div>
          </div>

          <div class="job-details-content job-details-analyze">
            <h3>关键信息提取分析</h3>

            <div class="work-role">
              <strong>岗位角色:</strong> {{ jobDetails.workRole.split(',').join(' / ') }}
            </div>

            <div class="work-requirements">
              <strong>技能要求:</strong> {{ jobDetails.workRequirements.split(',').join(' / ') }}
            </div>

            <div class="work-field">
              <strong>工作领域:</strong> {{ jobDetails.workField }}
            </div>

            <div class="work-experience">
              <strong>工作经验:</strong> {{ jobDetails.workExperience }}
            </div>
          </div>

          <div class="job-details-content">
            <h3>职位描述</h3>
            <span v-if="jobDetails.description" class="preserve-newlines">{{ jobDetails.description }}</span>
            <p v-else>无职位描述</p>
          </div>
        </div>

        <div class="col-lg-4">
          <div class="job-details-sidebar">
            <div class="job-widget">
              <h3>HR</h3>
              <ul class="social-icon">
                <li><span>{{ jobDetails.hr || '暂无信息' }}</span></li>
              </ul>
            </div>

            <div class="job-widget">
              <h3>公司情况</h3>

              <ul class="overview">
                <li>公司名：<span>{{ companyDetails.name || '暂无信息' }}</span></li>
                <li>公司地址：<span>{{ jobDetails.location || '暂无信息' }}</span></li>
                <li>公司规模：<span>{{ companyDetails.size || '暂无信息' }}</span></li>
                <li>融资情况：<span>{{ companyDetails.status || '暂无信息' }}</span></li>
                <li>公司描述：<span>{{ companyDetails.introduction.substring(0, 15) || '暂无信息' }}</span></li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Job Details Area -->

  <!-- Start Freelancer Area -->
  <section class="freelancer-area pt-100 pb-70">
    <div class="container">
      <div class="section-title">
        <h2 v-if="ResumeList.length > 0">该职位已收到的简历</h2>
        <h2 v-else>该职位暂未收到简历</h2>
      </div>

      <div class="row">
        <div
            class="col-lg-3 col-sm-6"
            v-for="(resume, index) in ResumeList"
            :key="index"
        >
          <el-card shadow="hover" class="resume-card" :style="{ backgroundColor: resume.approve === 1 ? '#f0fff0' : resume.approve === 2 ? '#fff0f0' : '' }">
            <template #header>
              <div class="clearfix">
                <span>{{ resume.name }}，{{ resume.birthdate }}</span>
                <el-tag size="medium">{{ resume.degree }}</el-tag>
              </div>
            </template>

            <div class="content-wrapper">
              <div class="text-muted">
                {{ resume.school }}, {{ resume.experiment }}年工作经验
              </div>
            </div>

            <div slot="footer">
              <!--              <span class="per-hour">简历得分：{{ calculateScore(resume) }}</span>-->
              <el-button
                  :type="resume.approve === 1 ? 'success' : resume.approve === 2 ? 'danger' : 'primary'"
                  @click="viewDetails(resume)"
                  class="view-resume-button"
              >
                {{
                  resume.approve === 1 ? '已同意，查看简历' :
                      resume.approve === 2 ? '已拒绝，查看简历' :
                          '查看简历'
                }}
              </el-button>


              <el-dialog
                  v-model="dialogVisible"
                  title="简历详情"
                  width="50%"
                  custom-class="custom-resume-dialog"
                  class="custom-dialog"
              >

                <template #header>
                  <div slot="title" class="dialog-title">
                    <span>简历详情</span>
                  </div>

                  <div class="dialog-header">
                    <div class="header-info">
                      <span>{{ currentResume.name }}，{{ currentResume.birthdate }}</span>
                      <el-tag size="medium" type="success">{{ currentResume.degree }}</el-tag>
                    </div>
                  </div>
                </template>



                <div class="dialog-body">
                  <div class="info-row">
                    <div class="info-col">
                      <i class="el-icon-school"></i>
                      <div class="label-bold-blue">学校：</div>
                      {{ currentResume.school }}
                    </div>
                    <div class="info-col">
                      <i class="el-icon-coin"></i>
                      <div class="label-bold-blue">专业：</div>
                      {{ currentResume.specialized }}
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <i class="el-icon-phone"></i>

                      <div class="label-bold-blue">求职意向：</div>
                      {{ currentResume.intention }}
                    </div>
                    <div class="info-col">
                      <i class="el-icon-office-building"></i>
                      <div class="label-bold-blue">工作经验：</div>
                      {{ currentResume.experiment }}年
                    </div>
                  </div>

                  <hr>
                  <div class="info-row full-width"> <!-- 技能独占一行 -->
                    <i class="el-icon-skill"></i>
                    <div class="label-bold-blue">专业技能：</div>

                    {{ currentResume.skills }}
                  </div>
                  <hr>
                  <div class="info-row full-width"> <!-- 项目经验独占一行 -->
                    <i class="el-icon-document"></i>
                    <div class="label-bold-blue">项目经历：</div>
                    <ul>
                      <li v-for="(project, index) in currentResume.projects.split('\n')" :key="index">{{ project }}</li>
                    </ul>
                  </div>
                  <hr>

                  <div class="info-row">
                    <div class="info-col full-width"> <!-- 修改为独占一行 -->
                      <i class="el-icon-suitcase"></i>
                      <div class="label-bold-blue">联系电话：</div>
                      {{ currentResume.phone }}
                    </div>
                  </div>

                </div>

                <template #footer>
                  <span class="dialog-footer">
                    <el-button type="success" @click="approveResume(currentResume)" round>同意</el-button>
                    <el-button type="danger" @click="rejectResume(currentResume)" round>拒绝</el-button>
                    <el-button type="primary" @click="dialogVisible = false" round>关闭</el-button>
                  </span>
                </template>
              </el-dialog>

            </div>
          </el-card>

        </div>
      </div>


    </div>
  </section>
  <!-- End Freelancer Area -->


  <!-- Start Subscribe Area -->
  <section class="subscribe-area subscribe-area-about-page">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找工作，一站解决</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua consec tetur.</p>

            <ul class="social-icon">
              <li>
                <a href="#">
                  <i class="bx bxl-facebook"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-instagram"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-linkedin-square"></i>
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="bx bxl-twitter"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Contact</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>Phone:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>Email:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>Address:</span>
                6890 Blvd, The Bronx, NY 1058 New York, USA
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Helpful Resources</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>Job Seekers</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.preserve-newlines {
  white-space: pre-wrap;
}

.view-resume-button {
  width: 100%;
  display: block;
  margin-top: 10px; /* 根据需要调整间距 */
  border-radius: 8px; /* 圆角效果 */
}

.resume-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-wrapper {
  flex: 1;
}


.custom-resume-dialog {
  /* 添加自定义对话框样式 */
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.header-info {
  display: flex;
  align-items: center;
}

.info-item {
  margin-bottom: 10px;
}

.info-item i {
  margin-right: 5px;
  color: #888;
}


.dialog-body {
  /* 添加蓝色边框 */
  border: 1px solid rgba(63, 157, 253, 1);
  border-radius: 8px;
  padding: 20px; /* 为内容区域添加内边距，提升阅读体验 */
}

.info-row {
  display: flex; /* 设置为Flex布局 */
  justify-content: space-between; /* 两端对齐，使信息左右分布 */
  margin-bottom: 10px;
}

.info-col {
  flex: 1; /* 让每个列自动分配宽度 */
  text-align: left; /* 文本左对齐 */
}

.single-col { /* 单列信息的样式 */
  text-align: justify;
  margin-bottom: 10px;

}

.info-row.full-width { /* 新增样式，用于独占一行的信息 */
  justify-content: flex-start !important; /* 取消两端对齐，改为左对齐 */
}

.info-col.full-width {
  flex: 0 0 100%; /* 让这一列占据100%宽度，即独占一行 */
}

.label-bold-blue {
  color: rgba(63, 157, 253, 1);
  font-weight: bold;
}

.info-row.full-width ul {
  /* 优化项目经历和专业技能的列表样式 */
  list-style-type: disc; /* 使用项目符号 */
  margin-left: 20px; /* 调整列表缩进 */
  margin-bottom: 0; /* 移除底部外边距以保持整洁 */
}

.info-row.full-width li {
  /* 项目列表项样式 */
  margin-bottom: 5px; /* 控制列表项之间的间距 */
}

.info-row.full-width .label-bold-blue {
  /* 为专业技能和项目经历的标题添加额外样式 */
  display: block; /* 改为块级元素，确保换行显示 */
  margin-bottom: 5px; /* 添加标题下方的间距 */
}

::v-deep .el-dialog__mask {
  background-color: rgba(0, 0, 0, 0); /* 设置透明 */
}

.dialog-title {
  text-align: center; /* 居中对齐 */
  color: #2041e1; /* 蓝色 */
  font-size: 24px; /* 根据需要调整字体大小 */
  font-weight: bold; /* 加粗，可选 */
  margin: 0; /* 清除默认的外边距 */
  padding: 10px 0; /* 上下内边距，可根据需要调整 */
  margin-bottom: 10px; /* 下外边距，根据需要调整 */
}

.job-details-analyze {
  margin-bottom: 20px;
}

.job-details-analyze div {
  margin-bottom: 10px;
}
</style>